<template>
    <div class="layout">
        <Layout>
            <Header :style="{background: '#2d8cf0', padding:'0 24px'}">
                <Top/>
            </Header>
            <Layout class="min-height">
                <Sider hide-trigger :style="{background: '#fff'}">
                    <Left/>
                </Sider>
                <Layout>                    
                    <Content class="min-height" :style="{padding: '12px', background: '#fff'}">
                        <router-view/>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>

<script>
    import Top from '@/template/Top'
    import Left from '@/template/Left'
    export default {        
        name: 'layout',
        components: {
            Top,
            Left            
        }       
    }
</script>

<style>
    .min-height{
        min-height: calc(100vh - 64px);
    }    
</style>
